<template>
  <div v-if="info" class="warp">
    <div class="custom-card">
      <a-card :bordered="false">
        <template slot="title">
          <span class="title">订单信息</span>
        </template>
        <div class="disFlx _p-20">
          <a-descriptions :column="1">
            <template slot="title">
              <span class="descriptions-title">订单信息</span>
            </template>
            <a-descriptions-item label="订单状态">
              <span :style="{ color: orderStateObj.color }">
                {{ orderStateObj.name }}
              </span>
            </a-descriptions-item>
            <a-descriptions-item label="订单编号">{{ info.orderCode }}</a-descriptions-item>
            <a-descriptions-item label="业务类型">活动报名订单</a-descriptions-item>
            <a-descriptions-item label="订单来源">{{ info.sourceOrgName }}</a-descriptions-item>
            <a-descriptions-item label="项目归属">{{ info.orgName }}</a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="1">
            <template slot="title">
              <span class="descriptions-title">支付信息</span>
            </template>
            <a-descriptions-item label="支付金额">
              {{ formatMoney({ isShowFree: false, money: info.payMoney || 0 }) }}
            </a-descriptions-item>
            <a-descriptions-item label="支付方式">
              {{ payModeText }}
            </a-descriptions-item>
            <a-descriptions-item label="提交时间">{{ info.createTime }}</a-descriptions-item>
            <a-descriptions-item label="支付时间">{{ info.payTime }}</a-descriptions-item>
            <a-descriptions-item label="支付流水号">{{ info.payCode }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </a-card>
    </div>
    <div class="custom-card">
      <a-card :bordered="false">
        <template slot="title">
          <span class="title">业务信息</span>
        </template>
        <a-table :columns="businessColumns" :data-source="[
          {
            productName: info.productName,
            ticketName: info.ticketName,
            price: info.price,
            productCount: info.productCount,
            totalMoney: info.totalMoney,
            totalDiscountMoney: info.totalDiscountMoney,
          }
        ]" :pagination="false">
          <div slot="name" slot-scope="text" class="disFlxAC">
            <viewer class="viewer" ref="viewer" :images="[info.productPicture]">
              <img v-if="info.productPicture" :src="info.productPicture" class="viewer-img"
                style="width:64px;height:64px;" />
              <img v-else src="@/assets/icons/default_userIcon.png" style="width:64px;height:64px;" />
            </viewer>

            <div class="ov-2 _ml-10">{{ text }}</div>
          </div>
          <template slot="footer">
            <div class="disFlx flexEnd" style="width: 100%;">
              <a-descriptions :column="1" style="width: 220px">
                <a-descriptions-item>
                  <template slot="label">
                    <div class="label">费用总价</div>
                  </template>
                  <div class="descriptions-warp">
                    {{ formatMoney({ isShowFree: false, money: info.totalMoney || 0 }) }}
                  </div>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template slot="label">
                    <div class="label">优惠</div>
                  </template>
                  <div class="descriptions-warp">
                    {{ formatMoney({ isShowFree: false, money: info.totalDiscountMoney || 0 }) }}
                  </div>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template slot="label">
                    <div class="label">实付款</div>
                  </template>
                  <div class="descriptions-warp" style="color:red">
                    {{ formatMoney({ isShowFree: false, money: info.payMoney || 0 }) }}
                  </div>
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="custom-card">
      <a-card :bordered="false">
        <template slot="title">
          <span class="title">子订单信息</span>
        </template>
        <a-table :columns="subOrderColumns" :data-source="info.subInfoList" :pagination="false">
          <div slot="personName" slot-scope="text, row" class="disFlxAC">
            <viewer class="viewer" ref="viewer" :images="[row.avatar]">
              <img v-if="row.avatar" :src="row.avatar" style="width:64px;height:64px;" />
              <img v-else src="@/assets/icons/default_userIcon.png" style="width:64px;height:64px;" />
            </viewer>
            <div class="ov-2 _ml-10">{{ text }}</div>
          </div>
          <div slot="refundStatus" slot-scope="text"
            :style="{ color: getActivitySubOrderStatus(orderStateObj.value, text).color }">
            {{ getActivitySubOrderStatus(orderStateObj.value, info.payState, text).name }}
          </div>
          <div slot="consumeStatus" slot-scope="text">
            {{ consumeStatusText(text) }}
          </div>
        </a-table>
      </a-card>
    </div>
    <div class="custom-card">
      <a-card :bordered="false">
        <template slot="title">
          <span class="title">分润信息</span>
        </template>
        <a-table :columns="settleInfoColumns" :data-source="info.settleInfoList" :pagination="false">
          <span slot="serial" slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script>
import { formatMoney } from '@/utils/number'
import { getActivityTicketOrderDetail, payModeDict } from '@/api/order/order'
import { RefundStatusEnum } from '@/enums/activity'
import { getActivityOrderStatus, getActivitySubOrderStatus } from '@/utils/orderStatusText'
import default_userIcon from "@/assets/icons/default_userIcon.png";
const businessColumns = [
  {
    dataIndex: 'productName',
    scopedSlots: { customRender: 'name' },
    title: '活动名称',
    width: 300
  },
  {
    title: '报名类型',
    key: 'ticketName',
    dataIndex: 'ticketName',
    width: 300
  },
  {
    title: '单价（元）',
    dataIndex: 'price',
    key: 'price',
    width: 140
  },
  {
    title: '报名数',
    key: 'productCount',
    dataIndex: 'productCount',
    scopedSlots: { customRender: 'tags' },
    width: 140
  },
  {
    title: '总计（元）',
    key: 'totalMoney',
    dataIndex: 'totalMoney',
    width: 140
  },
  {
    title: '优惠减免（元）',
    key: 'totalDiscountMoney',
    dataIndex: 'totalDiscountMoney',
    width: 140
  }
]

const subOrderColumns = [
  {
    title: '子订单关联归属',
    key: 'personName',
    dataIndex: 'personName',
    scopedSlots: { customRender: 'personName' },
    width: 230
  },
  {
    title: '金额（元）',
    key: 'payMoney',
    dataIndex: 'payMoney'
  },
  {
    title: '优惠减免（元）',
    key: 'discountMoney',
    dataIndex: 'discountMoney'
  },
  {
    title: '订单状态',
    key: 'refundStatus',
    dataIndex: 'refundStatus',
    scopedSlots: { customRender: 'refundStatus' }
  },
  {
    title: '核销状态',
    key: 'consumeStatus',
    dataIndex: 'consumeStatus',
    scopedSlots: { customRender: 'consumeStatus' }
  }
]

const settleInfoColumns = [
  {
    title: '序号',
    scopedSlots: { customRender: 'serial' },
    width: '80px'
  },
  {
    title: '商户',
    key: 'merchantName',
    dataIndex: 'merchantName'
  },
  {
    title: '商户号',
    key: 'saasMerchantNo',
    dataIndex: 'saasMerchantNo'
  },
  {
    title: '预估收益（元）',
    key: 'distributionAmount',
    dataIndex: 'distributionAmount'
  },
  {
    title: '结算金额（元）',
    key: 'settleAmount',
    dataIndex: 'settleAmount'
  },
  {
    title: '结算类型（元）',
    key: 'settleTypeName',
    dataIndex: 'settleTypeName'
  },
  {
    title: '结算时间（元）',
    key: 'settleDate',
    dataIndex: 'settleDate'
  }
]

export default {
  computed: {
    orderStateObj() {
      const item = getActivityOrderStatus(this.info.orderState, this.info.payState, this.info.refundStatus)
      return item
    },
    payModeText() {
      const obj = this.payModeDict.find(item => item.dictValue == this.info.payMode)
      return obj ? obj.label : ''
    }
  },
  data() {
    return {
      businessColumns,
      subOrderColumns,
      settleInfoColumns,
      payModeDict,
      RefundStatusEnum,
      info: null
    }
  },
  mounted() {
    this.queryActivityTicketOrderDetail()
  },
  methods: {
    getActivityOrderStatus,
    getActivitySubOrderStatus,
    formatMoney,
    async queryActivityTicketOrderDetail() {
      const res = await getActivityTicketOrderDetail(this.$route.query.id)
      if (res.code !== 0) return
      this.info = res.data
    },
    refundStatusText(text) {
      const obj = this.Dict.getLocal('RefundStatusEnumDict').find(item => item.dictValue == text)
      return obj ? obj.orderStatus : ''
    },
    consumeStatusText(text) {
      const obj = this.Dict.getLocal('ConsumeStatusEnumDict').find(item => item.dictValue == text)
      return obj ? obj.dictLabel : ''
    }
  }
}
</script>

<style lang="less" scoped>
.warp {
  background-color: #fff;

  .custom-card {
    .title {
      color: #1d2129;
      /* 20/CN-Medium */
      font-family: 'PingFang SC';
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 28px;
      /* 140% */
    }

    .descriptions-title {
      color: #1d2129;
      /* 16/CN-Regular */
      font-family: 'PingFang SC';
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      /* 150% */
    }

    ::v-deep .ant-descriptions-item>span {
      color: #4e5969;
      /* 14/CN-Regular */
      font-family: 'PingFang SC';
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
      /* 157.143% */
    }

    .disFlx {
      border-radius: 8px;
      background: #f7f8fa;
    }

    .ant-table-content {
      background-color: red;
    }

    .ant-table-footer {
      background: red;
    }
  }
}

.label {
  width: 60px;
  display: inline-block;
  text-align: right;
}

.descriptions-warp {
  width: 120px;
  margin-right: 20px;
  text-align: right;
}
</style>
